|
|
|
نوشته شده در یک شنبه 16 شهريور 1399
بازدید : 495
نویسنده : Taknoghteh
|
|
سلام رفقا امروز میخوام درمورد ساخت همبرگر یا برگر منو رو فقط با html و css و بدون استفاده از جاوا اسکریپت براتون توضیح بدم
اول کد هاشو براتون میزارم و بعد توضیح میدم
کد HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Berger Menu</title>
</head>
<body>
<header>
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" width="100%" height="300px">
</header>
<main>
</main>
<aside>
<div class="navBar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
<div class="burger" id="divIcon">
<div class="Icon"></div>
<div class="Icon"></div>
<div class="Icon"></div>
<div class="burgerMenu" id="downMenu">
<ul>
<a href="#"><li>Home</li></a>
<a href="#"><li>About</li></a>
<a href="#"><li>Services</li></a>
<a href="#"><li>Login</li></a>
</ul>
</div>
</div>
</aside>
</body>
</html>
خب کد های html فک نکنم به توضیح زیادی نیاز داشته باشه تنها نکته ای که باید بهش توجه بشه اینه که div با کلاس burgerMenu که هموت منویی هستش که بعد از کلیک یا هوور کردن نمایان میشه باید فرزند div مورد نظری باشه که میخوایم هوور یا کلیک روی اون انجام بشه.
تو این برنامه من اومدم با استفاده از هوور کردن این کد رو زدم شما میتونید با استفاده از input و قابلیت focus این کد رو با استفاده از کلیک بنویسید دفت کنید با استفاده از ویژگی visited لینک ها این امکان نیستش چون شما فقط میتونید یکبار کلیک کنید و منو باز بشه ولی منو دیگه بسته نمیشه اما با focus با کیلیک روی input منو باز و با کلیک روی جای دیگه ای از صفحه منو بسته میشه.
خب پر حرفی بسه بریم سراغ کد css
body {
background-color: #282923;
}
.navBar ul {
list-style-type: none;
padding: 0;
margin: 0;
background-color: rgb(250,250,250);
overflow: hidden;
}
.navBar li {
float: left;
}
.navBar a {
text-decoration: none;
color: rgb(0,0,0);
font-weight: bold;
padding: 10px;
display: block;
}
.burger{
width: 35px;
}
.burgerMenu{
display: none;
width: 160px;
}
.navBar a:hover {
background-color: rgb(200,200,200);
}
@media (max-width : 700px) {
header, .navBar {
display: none;
}
.Icon {
width: 35px;
height: 5px;
background-color: rgb(0,0,0);
margin-top: 5px;
}
.burgerMenu ul {
list-style-type: none;
padding: 0;
margin: 0;
background-color: rosybrown;
overflow: hidden;
}
.burgerMenu a{
display: block;
text-decoration: none;
padding: 5px;
color: rgb(0,0,0);
font-weight: 900;
}
.burgerMenu a:hover {
background-color: rgb(30,30,30);
color: rosybrown;
}
.burger:hover .burgerMenu {
display: block;
}
}
کد css هم به این صورته که در حالت عادی یک صفحه با منوی افقی هستش (navbar) ولی وقتی صفحه کوچیک میشه این منوی افقی تبدیل به منوی عمودی میشه که در اول کار مخفی و نشون داده نمیشه ولی بعد از آوردن موس روی آیکون های برگر منو منوی افقی نشون داده میشه و در اصل برگر منو داخل media نوشته شده.
امیدوارم که به کارتون بیاد اگر سوالی هم داشتید تو نظرات بپرسید.
:: موضوعات مرتبط:
کامپیوتر ,
,
:: برچسب‌ها:
آموزش html , آموزش اچ تی ام ال , آموزش برنامه نویسی , آموزش فارسی html , آموزش کدنویسی html , دانلود رایگان جزوه , کتاب آموزش کدنویسی Html , مهندسی کامپیوتر , آموزش html , آموزش اچ تی ام ال , آموزش طراحی وب , اینترنت , زبان html , صفحات وب , طراحی وب , کدهای html , وب , آموزش html css , آموزش اچ تی ام ال و سی اس اس , آموزش برنامه نویسی , آموزش فارسی html css , آموزش کدنویسی html css , دانلود رایگان جزوه , کتاب آموزش کدنویسی Html css , مهندسی کامپیوتر , آموزش html css , آموزش اچ تی ام ال و سی اس اس , آموزش طراحی وب , اینترنت , زبان html css , صفحات وب , طراحی وب , کدهای html css , آموزش css , آموزش سی اس اس , آموزش برنامه نویسی , آموزش فارسی css , آموزش کدنویسی css , دانلود رایگان جزوه , کتاب آموزش کدنویسی css , مهندسی کامپیوتر , آموزش css , آموزش سی اس اس , آموزش طراحی وب , اینترنت , زبان css , صفحات وب , طراحی وب , کدهای css , وب ,برگر منو ,
همبرگر منو ,
ترفند ,
ترفند وب ,
ترفند کامپیوتری ,
burger menu ,
hamburger menu ,
hamburger menu with css ,
hamburger menu without javascript ,
برگر منو بدون جاوا اسکریپت ,
همبرگر منو بدون جاوا اسکریپت ,
برگر منو بدون java script ,
همبرگر منو بدون , ,
|
|
|
عضو شوید
عضویت سریع
آمار مطالب
آمار بازدید
